<template>
  <div class="d-flex align-items-center flex-column">
    <div class="column-detail-page">
      <div class="media d-flex">
        <img
          :src="authorInfo"
          class="mr-3 rounded-circle boder border-light"
          style="width: 150px"
        />
        <div class="media-body px-4">
          <h4 class="mt-4">{{ columnData.author.nickName }}</h4>
          <p>{{ columnData.author.description }}</p>
        </div>
      </div>
      <div
        class="border-bottom"
        style="margin-top: 30px; margin-bottom: 15px"
      ></div>
      <column-item :columnData="columnData.list" />
    </div>
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent, onMounted, PropType } from "vue";
import { useRoute } from "vue-router";
import ColumnItem from "./ColumnItem.vue";
import { useStore } from "vuex";
import { ColumnItemProps } from "@/utils/interface";
export default defineComponent({
  name: "ColumnDetail",
  components: { ColumnItem },
  setup() {
    //  useRoute获取路由信息；useRouter定义路由的一系列行为
    const route = useRoute();
    const store = useStore();
    // 筛选数据
    const columnId = route.params.id;
    // 获取专栏作者信息
    store.dispatch("fecthAuthorItems", columnId);
    // 获取专栏文章列表
    store.dispatch("fetchColumnsItem", columnId);
    // onMounted(() => {
    //   // 获取专栏作者信息
    //   store.dispatch("fecthAuthorItems", columnId);
    //   // 获取专栏文章列表
    //   store.dispatch("fetchColumnsItem", columnId);
    // });
    const columnData = computed(
      (): ColumnItemProps => store.getters.getAuthorById
    );
    const authorInfo = computed(() => {
      if (!columnData.value.author.avatar) {
        return require("@/assets/defaultAvatar.png");
      } else {
        return columnData.value.author.avatar;
      }
    });
    return {
      route,
      columnData,
      authorInfo,
    };
  },
});
</script>
<style scoped>
.column-detail-page {
  /* margin-left: 20%;
  margin-right: 20%; */
  width: 700px;
}
</style>